<template>
  <div class="content">
    <div class="frozenAmountBox">
      <p @click="stockOrderListLinkClick">进货订单</p>
      <div>
        <span>商品赊货总额（元）</span>
        <p>{{frozenAmount}}</p>
      </div>
    </div>
    <scroll-view class="scroll-wrap" scroll-y @scrolltolower="handleLoadMore">
      <div class="wu"></div>
      <div
        class="list"
        v-for="(item,index) in stockList"
        :key="index"
        @click="stpckGoodsInfoClick(item)"
      >
        <div class="margin">
          <img :src="item.goodsImg" mode="scaleToFill" />
          <div class="right">
            <p class="ellipsis">{{item.goodsName}}</p>
            <div>
              <span>￥{{item.retailAmount}}</span>
              <!-- <p>×{{item.maxStockNum}}</p> to do 与安卓同步 -->
              <p>×{{item.goodsStock}}</p>
            </div>
            <!-- <span>剩余锁额：￥{{item.stockSupplyCost}}</span> -->
            <span>剩余锁额：￥{{item.allStockMoney}}</span>
          </div>
        </div>
      </div>
      <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
    </scroll-view>
  </div>
</template>

<script>
import {
  FIND_MY_FROZEN_AMOUNT,
  // FIND_STOCK_GOODS_PAGE
  FIND_SHOP_GOODS_PAGE
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      frozenAmount: '',
      currentPage: 1,
      alreadyLastPage: false,
      list: []
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    stockList () {
      return this.list.map(_ => ({
        ..._,
        goodsImg: _.goodsImg,
        goodsName: _.goodsName,
        stockSupplyCost: `${
          _.stockSupplyCost ? (_.stockSupplyCost * 1).toFixed(2) : '0.00'
        }`,
        stockSupplyNum: _.stockSupplyNum,
        goodsNo: _.goodsNo,
        mewAmoutFree: ((_.amount - _.freeAmount) * 0.01).toFixed(2),
        allStockMoney: (
          (_.amount - _.freeAmount) *
          0.01 *
          _.goodsStock
        ).toFixed(2)
      }))
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.currentPage = 1
    this.alreadyLastPage = false
    this.list = []
    this.findMyFrozenAmount()
    this._findShopList()
  },
  methods: {
    stockOrderListLinkClick () {
      this.$router.push(`/pages/data-analyze/stock/my/order/main`)
    },
    stpckGoodsInfoClick (item) {
      // 之前的接口有变动，所以把之前的goodsNo换成了stockGoodsNo
      this.$router.push(
        `/pages/data-analyze/stock/my/goods-info/main?goodsNo=${item.goodsNo}`
      )
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._findShopList()
      }
    },
    init () {
      const vm = this
      vm.currentPage = 1
      vm.alreadyLastPage = false
      vm.list = []
    },
    /** api **/
    findMyFrozenAmount () {
      const vm = this

      FIND_MY_FROZEN_AMOUNT(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.frozenAmount = (r.data.data * 0.01).toFixed(2)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _findShopList () {
      const vm = this
      let params = {}
      params.providerId = vm.account.providerId
      params.state = '1'
      params.isStock = 'Y'
      // params.isShelf = '1'
      params.shopId = vm.account.shopId
      // FIND_STOCK_GOODS_PAGE(params, vm.currentPage, 10)
      FIND_SHOP_GOODS_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { isFirstPage, isLastPage, list } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 商品列表
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.alreadyLastPage = true
        vm.list.push(...list)
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  background: #f6f8f9;
  > .frozenAmountBox {
    width: 100%;
    background: #fff;
    > p {
      width: 90%;
      margin: auto;
      height: 30px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 14px;
      color: #ef250b;
    }
    > div {
      width: 95%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      font-size: 14px;
      color: #000;
      > p {
        color: #727272;
      }
    }
  }
  > .scroll-wrap {
    height: calc(100% - 30px - 40px);
    .wu {
      height: 15px;
    }
    .list {
      width: 100%;
      background: #fff;
      margin-bottom: 15px;
      .margin {
        width: 90%;
        margin: auto;
        display: flex;
        align-items: center;
        padding: 15px 0;
        img {
          width: 75px;
          height: 75px;
          border-radius: 6px;
        }
        .right {
          width: calc(100% - 75px - 15px);
          height: 75px;
          margin-left: 15px;
          font-size: 14px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          p {
            color: #000;
          }
          div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            > span {
              font-size: 14px;
              color: #ef250b;
            }
            p {
              font-size: 12px;
              color: #727272;
            }
          }
          > span {
            color: #727272;
          }
        }
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
</style>
